<template>
	<view class="scanBox">
		<nav-bars bgColor="transparent" title="扫码核销" fontColor="#fff"></nav-bars>
		<view class="scanCode_box">
				<camera class='camera' mode="scanCode" @error="cameraError" @scancode='scancode'
					frame-size='large'>
					<cover-view class='animation' :animation="animation"></cover-view>
				</camera>
				<view class="bgBox">
					<view class="bottomBox">
						<view class="">礼品</view>
						<image :src="`${baseImg}/static/adminShop/writeOff/yhj.png`" mode=""></image>
						<view class="">红包</view>
						<view class="listBox" @click="toList">
							<image :src="`${baseImg}/static/adminShop/writeOff/list.png`" mode=""></image>
						</view>
					</view>
				</view>
		</view>
	</view>
</template>
<script>
	let animation = uni.createAnimation({});
	// let innerAudioContext = uni.createInnerAudioContext()
	// innerAudioContext.src = 'http://m10.music.126.net/20210818125423/bd0d08e6b203b714d5484b5c953c1a02/ymusic/a9c1/47f7/e72a/eeca0e403e1aa21dc60ca590be3db3f0.mp3'
	export default {
		data() {
			return {
				baseImg:this.$static,
				canScan:true,
				timer:null,
				animation
			}
		},
		onLoad() {
			uni.getSetting({
				success: (res) => {
					// console.log(res)
					// 用户还未授权
					if (!res.authSetting['scope.camera']) {
						uni.authorize({
							scope: 'scope.camera',
							success: (res) => {
								//用户同意授权
								console.log('2222')
								console.log(res)
							},
							fail:(res)=>{
								console.log(res,'0000')
								uni.showModal({
									content:'该功能使用的摄像头需要您的授权，是否去设置打开？',
									success:res=>{
										if(res.confirm){
											uni.openSetting({
												success:(res)=>{
													console.log(res.authSetting)
												},
											});
										}
									}
								})
							}
						})
					} else { //用户已经授权过了
						console.log('1111')
					}
				}
			})
		},
		onShow() {
			this.canScan = true
			this.donghua()
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			donghua() {
				let that = this;
				let scode = true
				this.timer = setInterval(function() {
					if (scode) {
						animation.translateY(250).step({
							duration:3000,
						})
						scode = !scode;
					} else {
						animation.translateY(0).step({
							duration: 3000
						})
						scode = !scode;
					}
						that.animation = animation.export()
					
				}.bind(this), 3000)
			},
			scancode(e){
			    // innerAudioContext.play()
			    // 扫描结果
			    let result = e.detail.result
				console.log(result);
				let path = result.split('?')[0]
				let data = result.split('?')[1]
				let prizeId = data.split('&')[0]
				let prizeCode = data.split('&')[1]
				let key1 = prizeId.split('=')[0]
				let key2 = prizeCode.split('=')[0]
				console.log(key1,key2,'-------')
				if(this.canScan && key1=='prize_id' && key2=='prize_code'){
					uni.navigateTo({
						url:`/pagesFour/activity/writeOff/details?${prizeId}&${prizeCode}`
					})
					this.canScan = false
				}else if(this.canScan && key1!='prize_id' && key2!='prize_code'){
					uni.showToast({
						title:'无效二维码',
						icon:'none'
					})
				}
			  },
			  
			// 进入核销记录列表
			toList(){
				uni.navigateTo({
					url:'/pagesFour/activity/writeList/recordList'
				})
			}
		}
	
	}
</script>
<style lang="scss">
	.scanBox{
		position: relative;
	}
	.scanCode_box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #333333;
		position: fixed;
		top: 0;
		left: 0;
		align-items: center;
		justify-content: space-around;
		.bgBox{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			// background-color: rgba(51,51,51,.5);
			.bottomBox{
				padding: 0 206rpx;
				width: 100%;
				height: 10%;
				position: fixed;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// background-color: #333;
				font: 500 28rpx/28rpx PingFang SC;
				color: #fff;
				image{
					width: 44rpx;
					height: 44rpx;
				}
				.listBox{
					position: absolute;
					right: 35rpx;
					top: -200rpx;
					width: 96rpx;
					height: 96rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: rgba(255,235,218,.4);
					border-radius: 50%;
				}
			}
		}
	}
	.camera {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
		// margin: 30rpx;
	}
	.animation {
		position: absolute;
		top: 500rpx;
		left: 10%;
		width: 80%;
		height: 2rpx;
		background-color: #F09B2C;
		box-shadow: 0rpx 2rpx 14rpx 2rpx #F09B2C;
		// border-radius: 50%;
	}
</style>